<template>
  <div class="app-container" id="pay"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 电费
      payData: [],
      queryInfo: {
        c_id: 7,
        currPage: 0,
        pageNum: 4,
      },
      //水费月单
      payDataWaterM: [],
      queryInfoWaterM: {
        c_id: 8,
        currPage: 0,
        pageNum: 4,
      },
      //水费单
      payDataWater: [],
      queryInfoWater: {
        c_id: 9,
        currPage: 0,
        pageNum: 4,
      },
      //天然费单
      payDataSky: [],
      queryInfoSky: {
        c_id: 9,
        currPage: 0,
        pageNum: 4,
      },
      //物业费单
      payDataWY: [],
      queryInfoWY: {
        c_id: 9,
        currPage: 0,
        pageNum: 4,
      },
      //宽带费单
      payDataKD: [],
      queryInfoKD: {
        c_id: 9,
        currPage: 0,
        pageNum: 4,
      },
    };
  },
  mounted() {
    this.getEchartsData();
  },
  methods: {
    async getEchartsData() {
      let res = await this.$axios({
        url: "/cost/getCostData",
        methods: "get",
        params: this.queryInfo,
      });
      this.payData = res.data.total;

      let resWM = await this.$axios({
        url: "/cost/getCostData",
        methods: "get",
        params: this.queryInfoWaterM,
      });
      this.payDataWaterM = resWM.data.total;

      let resW = await this.$axios({
        url: "/cost/getCostData",
        methods: "get",
        params: this.queryInfoWater,
      });
      this.payDataWater = resW.data.total;

      let resS = await this.$axios({
        url: "/cost/getCostData",
        methods: "get",
        params: this.queryInfoSky,
      });
      this.payDataSky = resS.data.total;

      let resWY = await this.$axios({
        url: "/cost/getCostData",
        methods: "get",
        params: this.queryInfoWY,
      });
      this.payDataWY = resWY.data.total;

      let resKD = await this.$axios({
        url: "/cost/getCostData",
        methods: "get",
        params: this.queryInfoKD,
      });
      this.payDataKD = resKD.data.total;
      // 绘制图表
      this.echartsInit();
    },
    echartsInit() {
      echarts.init(document.getElementById("pay")).setOption({
        title: {
          text: "缴费订单项目",
          left: "right",
        },
        legend: {
          data: ["计费项目"],
          left: "",
        },
        radar: {
          indicator: [
            { name: "电费表", max: 12 },
            { name: "水费固定月单", max: 12 },
            { name: "水费按量单", max: 12 },
            { name: "天然气单", max: 12 },
            { name: "物业费单", max: 12 },
            { name: "宽带费单", max: 12 },
          ],
          splitArea: {
            areaStyle: {
              // 图表背景网格区域的颜色
              color: ["rgb(255, 238, 243)"],
            },
          },
        },
        series: [
          {
            name: "计费项目",
            type: "radar",
            data: [
              {
                value: [
                  this.payData,
                  this.payDataWaterM,
                  this.payDataWater,
                  this.payDataSky,
                  this.payDataWY,
                  this.payDataKD,
                ],
                name: "计费项目",
              },
            ],
            itemStyle: {
              //上方显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgb(16, 158, 255)",
                    fontSize: 14,
                  },
                },
              },
            },
            color: ["rgb(16, 158, 255)"],
            areaStyle: {
              color: "rgb(16, 158, 255)",
              opacity: 0.8,
            },
            lineStyle: {
              normal: {
                color: "rgb(16, 158, 255)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container::v-deep {
  //   padding: 20px;
  width: 100%;
  height: 350px;
}
</style>
